<template>
  <button @click="loadAsyncComponent">加载异步组件</button>
  <div>异步组件</div>
  <template v-if="flag">
    <AsyncComp>
      <template #header="headerProps">
        {{ headerProps }}
      </template>

      <template #default="{ message: { res, data } }">
        <p>{{ data }}:</p>
        <p>《临江仙·滚滚长江东逝水》 杨慎</p>
        <p>{{ res[0] }}</p>
        <p>{{ res[1] }}</p>
      </template>

      <template #footer="{ message }">
        {{ message }}
      </template>
    </AsyncComp>
  </template>
</template>
<script setup>
import { ref } from "vue";
import { defineAsyncComponent } from "vue";
// import LoadingComponent from "./child.vue";
let AsyncComp = null;
let flag = ref(false);
function loadAsyncComponent() {
  AsyncComp = defineAsyncComponent(() => import("./child.vue"));
  // AsyncComp = defineAsyncComponent({
  //   // 加载函数
  //   loader: () => import("./child.vue"),
  //   // 加载异步组件时使用的组件
  //   loadingComponent: LoadingComponent,
  //   // 展示加载组件前的延迟时间，默认为 200ms
  //   delay: 200,

  //   // 加载失败后展示的组件
  //   // errorComponent: ErrorComponent,
  //   // // 如果提供了一个 timeout 时间限制，并超时了
  //   // // 也会显示这里配置的报错组件，默认值是：Infinity
  //   // timeout: 3000,
  // });
  flag.value = true;
  
}
</script>
